<template>
  <van-button class="city" icon="location" round type="primary" color="#7232dd" to="city">武汉</van-button>
  <van-button v-if="toggle" class="toggle" round color="rgba(0,0,0,0.6)" type="danger" text="">定位到您在{{ locationCity }} /
    点击切换</van-button>
  <main id="map">
    <div id="mapCon">
      <!-- Popup -->
      <div id="popup" class="ol-popup">
        <a href="#" id="popup-closer" class="ol-popup-closer"></a>
        <div id="popup-content">
        </div>
      </div>
    </div>
  </main>
</template>
<script setup>
import { storeToRefs } from 'pinia';
import { useCityStore } from '/src/stores/cities.js';
import { computed, onMounted, ref } from 'vue';
import { addMap } from '/src/hooks/map.js'
import axios from "@/request"
// 导入jsonp模块
import { jsonp } from 'vue-jsonp'
// 使用useCityStore
const cityStore = useCityStore()
// 定义定位不一致
const toggle = ref(false)
/* 1.获取存储的城市 */
/* 2.获取定位的城市 */
/* 3.判断存储的城市是否为空 */
/* 3.1
      空
        加载定位城市的json数据并飞行
*/
/* 3.2
      不为空
        3.2.1 获取存储城市的代码---加载存储城市的json并飞行
        3.2.2 判断存储城市和定位城市是否一致 
                  不一致提示
                    点击提示按钮加载定位城市并飞行
*/
/* 获取存储的城市 */
const { historyCities } = storeToRefs(cityStore)
// 存储城市的信息
const historyCity = computed(() => {
  return jsonp(`https://apis.map.qq.com/ws/geocoder/v1/?address=${historyCities.value[0]}&key=5C7BZ-EDALU-4ACVA-2T36I-DJM56-Z4FJ5&output=jsonp`).then((res) => {
    return res.result
  })
})
/* 封装定位城市 */
const locationCity = ref()
function obtainLocationCity() {
  jsonp('https://apis.map.qq.com/ws/location/v1/ip?key=5C7BZ-EDALU-4ACVA-2T36I-DJM56-Z4FJ5&output=jsonp').then(res => {
    locationCity.value = res.result;
  })
}
/* 封装飞行城市 */
const flay = (lng, lat) => {
  /* 1、执行飞行视角*/
  let view = map.getView();
  view.animate({
    center: [lng, lat],
    zoom: 9,
    duration: 2000
  })
}
onMounted(() => {
  console.log(historyCity);
  /* 请求腾讯地图位置数据 */
  jsonp('https://apis.map.qq.com/ws/location/v1/ip?key=5C7BZ-EDALU-4ACVA-2T36I-DJM56-Z4FJ5&output=jsonp').then((res) => {
    // 位置 信息
    let { location, ad_info } = res.result;
    // 省份和区域代码
    let { city, adcode } = ad_info;
    locationCity.value = city
    /* 判断选择的城市是否和定位城市一致 */
    /* console.log(cityStore.historyCities); */
    /*     const select = cityStore.historyCities[0]
        console.log(select); */
    // 如果有选择
    let select
    if (select) {
      const selectAdcode = selectCode()
      if (select != city) {
        toggle.value = true
        setTimeout(() => {
          toggle.value = false
        }, 5000)
      }
    }
    function selectCode() {
      let code = Number
      jsonp(`https://apis.map.qq.com/ws/geocoder/v1/?address=${select}&key=5C7BZ-EDALU-4ACVA-2T36I-DJM56-Z4FJ5&output=jsonp`).then((res) => {
        code = res.result.ad_info.adcode
        console.log(res.result.location);
      })
      return code
    }
    /* 加载地图容器 */
    const map = addMap(adcode)
    // 设置延时
    setTimeout(() => {
      const lnglat = [location.lng, location.lat]
      /* 1、执行飞行视角*/
      let view = map.getView();
      view.animate({
        center: lnglat,
        zoom: 9,
        duration: 2000
      })
    })
  })
})

</script>
<style  src="/src/assets/home.styl" scoped>

</style>